<template>
	<nt-container>
		<view class="nt-notice">
			<template v-if="messageList.length">
				<u-list
					@scrolltolower="getList"
				>
					<view class="nt-notice__item" v-for="it in messageList" :key="it.id" @tap="toDetail(it)">
						<view class="nt-notice__item--time">{{it.push_date}}</view>
						<view class="nt-notice__item--card">
							<view class="nt-notice__item--card-header">
								<image class="nt-notice__item--card-header__icon" src="/static/image/notice-message-1.png"></image>
								<view class="nt-notice__item--card-header__title">{{it.title}}</view>
							</view>
							<view class="nt-notice__item--card-content">{{it.remarks}}</view>
						</view>
					</view>
				</u-list>
			</template>
			<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</view>
	</nt-container>
</template>

<script>
import { getMessagesList, setMessagesRead } from "@/api"
export default {
	data(){
		return {
			type: "",
			messageList: [],
			pageIndex: 1,
			isNext: true
		}
	},
	onLoad(options){
		this.type = options.type || ""
		this.getList()
	},
	methods: {
		getList(){
			if(!this.isNext) return this.toast("没有更多了~")
			getMessagesList({
				modelx: this.type,
				page: this.pageIndex
			}).then(res => {
				if(res.code === 1){
					this.pageIndex ++
					this.messageList = [...this.messageList, ...res.data.data]
					if(this.messageList.length >= res.data.total){
						this.isNext = false
					}
				}
			})
		},
		toDetail(it){
			if(it.is_read == 0){
				this.messagesRead(it.id)
			}
			if(it.modelx === "order"){
				this.nav(`/subpackage/order/pages/_id?id=${it.event_id}`)
				return;
			}else if(it.url){
				this.nav(`/pages/webview/index?src=${it.url}`)
				return
			}
			this.nav(`/subpackage/member/pages/message/_id?id=${it.id}`)
		},
		messagesRead(id){
			setMessagesRead({id, funtype: "id"})
		}
	}
}
</script>

<style lang="scss" scoped>
.nt-notice{
	padding: 30rpx;
	&__item{
		margin-bottom: 40rpx;
		&--time{
			font-size: 24rpx;
			color: #999;
		}
		&--card{
			padding: 25rpx;
			background:#fff;
			border-radius: 10rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			&-header{
				display:flex;
				align-items: center;
				&__icon{
					width: 80rpx;
					height: 80rpx;
				}
				&__title{
					font-size: 30rpx;
					font-weight: bold;
					color:#333;
					flex: 1;
					padding-left: 10rpx;
				}
			}
			&-content{
				font-size: 26rpx;
				color:#333;
				margin-top: 20rpx;
			}
		}
	}
}
</style>